(async function () {
  // 验证是否登录，如果没有登录，跳转到登录页面，如果登录了，获取登录用户的信息
  const resp = await API.profile();
  const user = resp.data;
  if (!user) {
    alert("未登录或者登录授权已过期，请重新登录");
    location.href = "./login.html";
    return;
  }

  // dom元素
  const doms = {
    // 用户信息
    aside: {
      nickname: $("#nickname"),
      loginId: $("#loginId"),
    },
    // 注销
    close: $(".close"),
    // 聊天框
    chatContainer: $(".chat-container"),
    // 聊天输入栏容器
    msgContainer: $(".msg-container"),
    // 输入框
    txtMsg: $("#txtMsg"),
  };

  // 事件函数
  function eventEntry() {
    // 注销事件
    doms.close.onclick = function () {
      API.loginOut();
      location.href = "./login.html";
    };
    // 发送聊天消息事件
    doms.msgContainer.onsubmit = function (e) {
      e.preventDefault();
      sendChat();
    };
  }

  // 发送聊天消息
  async function sendChat() {
    // 去掉文本内容首尾空格
    const content = doms.txtMsg.value.trim();
    if (!content) {
      return;
    }
    // 判断是否有内容，如果有,执行后续代码，如果没有，直接返回
    // 先设置页面
    addChat({
      from: user.loginId,
      to: null,
      content: content,
      createdAt: Date.now(), //获取当前时间的时间戳
    });
    doms.txtMsg.value = "";
    scrollBottom();
    // 获取网络的消息对象
    const resp = await API.sendChat(content);
    addChat({
      from: null,
      to: user.loginId,
      ...resp.data,
    });
    scrollBottom();
  }

  // 设置用户信息
  function setUserInfo() {
    doms.aside.nickname.innerText = user.nickname;
    doms.aside.loginId.innerText = user.loginId;
  }

  // 加载历史聊天记录
  async function loadHistory() {
    const resp = await API.getHistory();
    for (const item of resp.data) {
      addChat(item);
    }
    // 加载完成滚动条定位至底
    scrollBottom();
  }

  // 滚动条滚动至底
  function scrollBottom() {
    doms.chatContainer.scrollTop = doms.chatContainer.scrollHeight;
  }

  // 传入一个消息对象，将其添加到页面中
  /* 页面代码
  <div class="chat-item me">
   <img class="chat-avatar" src="./asset/avatar.png" />
   <div class="chat-content">你几岁啦？</div>
   <div class="chat-date">2022-04-29 14:18:13</div>
  </div>
  /*获取的数据
  content: "你几岁啦？"
  createdAt: 1651213093992
  from: "haha"
  to: null
  */
  function addChat(chatInfo) {
    // <div class="chat-item me">
    const div = $$$("div");
    div.classList.add("chat-item");
    if (chatInfo.from) {
      div.classList.add("me");
    }

    // <img class="chat-avatar" src="./asset/avatar.png" />
    const img = $$$("img");
    img.className = "chat-avatar";
    img.src = chatInfo.from ? "./asset/avatar.png" : "./asset/robot-avatar.jpg";

    // <div class="chat-content">你几岁啦？</div>
    const content = $$$("div");
    content.className = "chat-content";
    content.innerText = chatInfo.content;

    // <div class="chat-date">2022-04-29 14:18:13</div>
    const date = $$$("div");
    date.className = "chat-date";
    // 时间戳转换2022-04-29 14:18:13
    date.innerText = formatDate(chatInfo.createdAt);

    // 合成页面
    div.appendChild(img);
    div.appendChild(content);
    div.appendChild(date);
    doms.chatContainer.appendChild(div);
  }

  // 时间戳转换2022-04-29 14:18:13
  function formatDate(timestamp) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    const hour = date.getHours().toString().padStart(2, "0");
    const minute = date.getMinutes().toString().padStart(2, "0");
    const second = date.getSeconds().toString().padStart(2, "0");
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }

  // 主入口程序入口
  async function init() {
    eventEntry(); // 事件函数
    setUserInfo(); // 设置用户信息
    await loadHistory(); // 获取历史聊天记录
  }
  init();
})();
